
<template>
	<!-- 考勤管理 -->
	<main-box>
		<el-row :gutter="30">
			<el-col :span="3">
				<el-button type="text" style="width:100%;font-size:0.18rem;color:#666666;" :style="selectPanel==1?'color:#333333;font-weight:bold;':''"
				 @click="selectPanel=1">考勤</el-button>
			</el-col>
			<el-col :span="3">
				<el-button type="text" style="width:100%;font-size:0.18rem;color:#666666;" :style="selectPanel==2?'color:#333333;font-weight:bold;':''"
				 @click="selectPanel=2">晨检</el-button>
			</el-col>
			<el-col :span="3">
				<el-button type="text" style="width:100%;font-size:0.18rem;color:#666666;" :style="selectPanel==3?'color:#333333;font-weight:bold;':''"
				 @click="selectPanel=3">请假</el-button>
			</el-col>
			<el-col :span="3">
				<el-button type="text" style="width:100%;font-size:0.18rem;color:#666666;" :style="selectPanel==4?'color:#333333;font-weight:bold;':''"
				 @click="selectPanel=4">每月考勤提交</el-button>
			</el-col>
			<el-col v-if="selectPanel==4" :span="12" style="text-align:right;">
				<el-date-picker
					style="width: 1.2rem;"
					v-model="searchParam.selectMonth"
					@change="changeMonth"
					type="month"
					:picker-options="pickerOptions"
					placeholder="选择月">
				</el-date-picker>
			</el-col>
			<el-col v-else :span="12" style="text-align:right;">
				<el-radio-group class="timeselect" v-model="timeselect"  @change="timeselectchange">
					<el-radio-button label="今日"></el-radio-button>
					<el-radio-button label="本周"></el-radio-button>
					<el-radio-button label="本月"></el-radio-button>
					<el-radio-button label="自定义" ref="selfBtn"></el-radio-button>
				</el-radio-group>
				<el-date-picker
					style="width: 1rem;margin-left: -1rem;z-index: -1;visibility: hidden;"
					v-model="selfTime" @change="updateSelfTime"
					type="datetimerange"
					ref="selfTime"
					value-format="yyyy-MM-dd HH:mm:ss"
					range-separator="至"
					start-placeholder="开始日期" 
					end-placeholder="结束日期">
				</el-date-picker>
			</el-col>
		</el-row>
		<!-- 考勤 -->
		<div v-if="selectPanel==1">
			<attendanceAttend ref="attendanceAttend"></attendanceAttend>
		</div>
		<!-- 晨检 -->
		<div v-else-if="selectPanel==2">
			<attendanceMorningcheck ref="attendanceMorningcheck"></attendanceMorningcheck>
		</div>
		<!-- 请假 -->
		<div v-else-if="selectPanel==3">
			<attendanceLeave ref="attendanceLeave"></attendanceLeave>
		</div>
		<!-- 每月考勤提交 -->
		<div v-else-if="selectPanel==4">
			<attendanceRecord ref="attendanceRecord"></attendanceRecord>
		</div>
		
	</main-box>
</template>

<script>
	import attendanceAttend from './common/attendance_attend'
	import attendanceMorningcheck from './common/attendance_morningcheck'
	import attendanceLeave from './common/attendance_leave'
	import attendanceRecord from './common/attendance_record'
	export default{
		components:{attendanceAttend,attendanceMorningcheck,attendanceLeave,attendanceRecord},
		data(){
			return {
				selectPanel:1,
				timeselect:'今日',
				pre_timeselect:'',
				selfTime:'',
				searchParam:{
					startTime:'',
					endTime:'',
					selectMonth:new Date(),
				},
				//日期有效性计算
				pickerOptions : {
					disabledDate : function(date) {
						let select = tool.DateToString(date,"yyyy-MM-dd");
						let now = tool.DateToString(new Date(),"yyyy-MM-dd");
						return ((select<now)? false : true);
					}
				},
			}
		},
		methods:{
			campusChange : function(campusId) { //校区改变
				let refName=['','attendanceAttend','attendanceMorningcheck','attendanceLeave','attendanceRecord'];
				this.$refs[refName[this.selectPanel]].campusChange(campusId);
			},
			/**时间切换 */
			timeselectchange(d){
				//自定义时间选取
				if(d==='自定义'){
					this.$refs.selfTime.focus();
					this.timeselect=this.pre_timeselect;
					return;
				}
				this.selfTime=[];
				let timeobj;
				if(d=='今日'){
					timeobj=tool.getTimeObjByType(1);
				}
				else if(d=='本周'){
					timeobj=tool.getTimeObjByType(2);
				}
				else if(d=='本月'){
					timeobj=tool.getTimeObjByType(3);
				}
				this.pre_timeselect=d;
				this.searchParam.startTime=timeobj.startTime;
				this.searchParam.endTime=timeobj.endTime;
				
			},
			/**自定义时间 */
			updateSelfTime(d){
				if(!d)return;
				this.timeselect='自定义';
				// let start=tool.DateToString(d[0],'yyyy-MM-dd HH:mm:ss'),
				// end=tool.DateToString(d[1],'yyyy-MM-dd HH:mm:ss');
				this.searchParam.startTime=d[0];
				this.searchParam.endTime=d[1];
				
			},
			changeMonth(val){
				// console.log(val)
			},
		},
		mounted(){
			
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss" scoped>
	


	/*自定义滚动条样式*/
	// .box-tasks::-webkit-scrollbar {
	// 	// height: 0.08rem;
	// 	width: 0.05rem;
	// }
	// .box-tasks::-webkit-scrollbar-thumb {
	// 	border-radius: 0.5rem;
	// 	background: #BBBBBB;
	// }
	// .box-tasks::-webkit-scrollbar-track {
	// 	background: rgba(242, 246, 252, 0);
	// }	

	
</style>